<script setup>
import { Message } from 'element-ui';
import { useRequest } from '@/hooks/requestHooks';
import { useDownload } from '@/hooks/tool.js';
import { useRouter } from '@/router/index.js';
import { getInstitutionList, getType } from '@/api/index.js';
import { TableList } from '@/components/MainComponents.js';
import AreaForm from '@/views/components/AreaForm.vue';

const router = useRouter();
const queryForm = ref({
  areaNamePaths: '山西省',
  institutionCode: '',
  organizationType: '',
  pageNum: 1,
  pageSize: 10,
});
const selectionList = ref([]);
const [res, loading, run] = useRequest(getInstitutionList, {
  defaultParams: [queryForm.value],
  // manual: true,
});
const handleDetails = row => {
  router.replace({ path: 'entDirectoryDetails', query: { code: `${row.buildingCode}` } });
};
const columObj = ref({
  selection: true,
  index: true,
  columnData: [
    {
      text: true,
      prop: 'socialId',
      label: '机构代码',
    },
    {
      text: true,
      prop: 'buildingName',
      label: '机构名称',
    },
    {
      text: true,
      prop: 'address',
      label: '机构地址',
    },
    {
      text: true,
      prop: 'branchType',
      label: '机构类型',
    },
    {
      text: true,
      prop: 'total',
      label: '能耗总量（tce）',
    },
    // {
    //   text: true,
    //   prop: 'water',
    //   label: '水能耗（t）',
    // },
    // {
    //   text: true,
    //   prop: 'electricity',
    //   label: '电能耗（kWh）',
    // },
    // {
    //   text: true,
    //   prop: 'air',
    //   label: '气能耗（m³）',
    // },
    // {
    //   text: true,
    //   prop: 'warm',
    //   label: '暖能耗（KJ）',
    // },
    // {
    //   label: '操作',
    //   operations: [
    //     {
    //       type: 'text',
    //       label: '详情',
    //       buttonClick: handleDetails,
    //     },
    //   ],
    // },
  ],
});
useRequest(getType, {
  onSuccess: res => {
    res.forEach(n => {
      let obj = {
        text: true,
        prop: n.fileName,
        label: `${n.energyName}能耗（${n.energyUnit}）`,
      };
      columObj.value.columnData.push(obj);
    });
    columObj.value.columnData.push({
      label: '操作',
      operations: [
        {
          type: 'text',
          label: '详情',
          buttonClick: handleDetails,
        },
      ],
    });
  },
});
const handleQuery = params => {
  let str = params?.cascader + '';
  queryForm.value.areaNamePaths = str.replace(/,/g, '/');
  queryForm.value.institutionCode = params?.buildingCode?.enterpriseCode ?? '';
  queryForm.value.organizationType = params.organizationType;
  run(queryForm.value);
};
const handleExport = () => {
  if (selectionList.value?.length > 0) {
    useDownload(
      '/energyservice/overviewAnalysis/exportInstitutionList',
      { institutionCodeList: selectionList.value },
      `机构名录.xlsx`,
    );
  } else {
    Message.warning('请选择需要导出的数据');
  }
};
const getList = e => {
  queryForm.value.pageNum = e.page;
  queryForm.value.pageSize = e.limit;
  run(queryForm.value);
};
const handleSelectionChange = val => {
  const ids = val.map(item => item.buildingCode);
  selectionList.value = ids;
};
</script>

<template>
  <div>
    <AreaForm
      ref="areaFormRef"
      :propParams="false"
      :institutionType="true"
      @handleQuery="handleQuery"
      @resetQuery="handleQuery"
    />
    <div class="contBox">
      <div class="u-df-spb mb20">
        <span>机构名录列表</span>
        <el-button type="primary" plain size="small" @click="handleExport">导出</el-button>
      </div>
      <TableList
        v-loading="loading"
        :total="res?.total ?? 0"
        :height="510"
        :tableData="res?.rows"
        :pageObj="queryForm"
        :columObj="columObj"
        @getList="getList"
        @handleSelectionChange="handleSelectionChange"
      />
    </div>
  </div>
</template>
<style lang="scss" scoped></style>
